

<%@page import="cs4280.dao.MovieDAO"%>
<%--
    Document   : index
    Created on : 2011-3-22, 11:19:34
    Author     : PangPei
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.util.ArrayList, java.util.Iterator, cs4280.bean.*"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Cult Cinema</title>
        <meta name="keywords" content="" />
        <meta name="description" content="This web site exists to fulfill the coursework requirement of CS4280.
              Do not use your real personal data as input." />
        <link href="default.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="jquery/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="jquery/jquery.slidertron-0.1.js"></script>
        <script type="text/javascript" src="jquery.twitter.js"></script>
        <script type="text/javascript" src="jquery/common.js"></script>
        <script type="text/javascript" src="jquery/payment.js"></script>
        <link rel="stylesheet" href="jquery.twitter.css" type="text/css" media="all"/>
        <style type="text/css">
            @import "gallery.css";
            

        </style>

        <style type="text/css">
            #cardNo1 {
    width:60px;
    margin-left: 10px;
}

#cardNo2,#cardNo3,#cardNo4 {
    margin-left: 0px;
    width: 60px;
}

#expiryYear {margin-left: 0px; width:60px;}

#expiryMonth {margin-left: 10px; width:40px;}


.error{
	visibility:hidden;
	color:red;
}


.paymentLabel{

    width: 100px;
}

form#paymentInformation fieldset {
	border: 1px solid #aaaaaa;
	padding: .5em;
	}


        </style>
        


    </head>
    <body><div id="wrapper">
            <div id="header">
                <div id="logo">
                    <h1><a href="#">CultCinema </a></h1>
                    <h2><a href="#">By Phoena and Yvonne</a></h2>
                </div>

                <!-- end div#logo -->

                <div id="menu">
                    <ul>
                        <form name="home" id="home" method="post" action="index.do">
                            <li ><a onclick="home.submit();" >Homepage</a></li>
                        </form>
                        <li class="active"><a href="#" >Movies</a></li>

                        <form name="discuss" id="discuss" method="post" action="/assignmentCinema/">
                            <input type="hidden" name="todo" id="todo" value="messageBox" />
                            <li><a onclick="discuss.submit();">Discuss</a></li>
                        </form>
                        <form name="manage" id="manage" method="post" action="memberControl.do">
                            <li><a onclick="manage.submit();">Manage</a></li>
                        </form>
                    </ul>
                </div>

                <!-- end div#menu -->

            </div>
        </div>

        <div>
            <div id="page">
                <div id="page-bgtop">
                    <div id="content">
                        <div id="gallery-bg">
                            <div id="gallery-bgtop">
                                <div id="gallery-bgbtm">
                                    <div id="foobar">
                                        <div class="navigation"> <a href="#" class="first">[ &lt;&lt; ]</a> &nbsp; <a href="#" class="previous">[ &lt; ]</a> &nbsp; <a href="#" class="next">[ &gt; ]</a> &nbsp; <a href="#" class="last">[ &gt;&gt; ]</a> </div>

                                        <div class="viewer">
                                            <div class="reel">
                                                <div class="slide"> <img src="images/img13.jpg" alt=""> <span>Phoena and Yvonne.</span> </div>
                                                <div class="slide"> <img src="http://www.blog.spoongraphics.co.uk/wp-content/uploads/2011/soldier-character/vector-soldier-character.jpg" alt=""> <span>Phoena.</span> </div>
                                                <div class="slide"> <img src="http://www.blog.spoongraphics.co.uk/wp-content/uploads/2010/reindeer/reindeer-character-sm.jpg" alt=""> <span>Yvonne.</span> </div>
                                                <div class="slide"> <img src="http://www.blog.spoongraphics.co.uk/wp-content/uploads/2009/12/1.png" alt=""> <span>Phoena and Yvonne.</span> </div>
                                            </div>
                                        </div>
                                    </div>
                                    <script type="text/javascript">

                                        $('#foobar').slidertron({
                                            viewerSelector:			'.viewer',
                                            reelSelector:			'.viewer .reel',
                                            slidesSelector:			'.viewer .reel .slide',
                                            navPreviousSelector:	'.previous',
                                            navNextSelector:		'.next',
                                            navFirstSelector:		'.first',
                                            navLastSelector:		'.last'
                                        });
                                    </script>
                                    <!-- end -->

                                </div>
                            </div>
                        </div>
                        <div class="post">
                            <div class="post-bgtop">
                                <div class="post-bgbtm">
                                    <div class="entry">
                                   
<%@page import="cs4280.bean.*"%>

        
        <script type="text/javascript" >

            function chooseOnePayment(obj) {
                var i,myObj;
                myObj=document.getElementsByName(obj);
                for(i=0;i<myObj.length;i++){
                    if(myObj[i].checked)break;
                };
                if(i>=myObj.length){
                    alert("Please choose one method for payment.");
                    return false;
                } else {
                    return true;
                }
            }

        </script>

        

        <jsp:useBean id="price" type="cs4280.bean.Price" scope="session"/>
        <h1>Ticket Payment</h1>

        <p>Total amount: <%=price.getTotalPrice()%></p>


        <form id="paymentInformation" method="post" onSubmit="return (chooseOnePayment('paymentMethod')&&validateForm(this.id));" action="<jsp:expression>(String) request.getAttribute("javax.servlet.forward.request_uri")</jsp:expression>">
            <!-- form elements -->
            <input type="hidden" name="todo" id="todo" value="dobookticket" />
            <fieldset>
                <input type="radio" name="paymentMethod" value="1" />1.Pay by Credit Card
                <p>
                    <label for="CardNo" class="paymentLabel">Card No:</label>
                    <input type="text" id="cardNo1" name="cardNo1" value="" />
                    <input type="text" id="cardNo2" name="cardNo2" value="" />
                    <input type="text" id="cardNo3" name="cardNo3" value="" />
                    <input type="text" id="cardNo4" name="cardNo4" value="" />
                    <br />
                    <label for="expiryDate"  class="paymentLabel">Expiry Date: </label>
                    <select id="expiryMonth" name="expiryMonth">
                        <option value="1">01</option>
                        <option value="2">02</option>
                        <option value="3">03</option>
                        <option value="4">04</option>
                        <option value="5">05</option>
                        <option value="6">06</option>
                        <option value="7">07</option>
                        <option value="8">08</option>
                        <option value="9">09</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                    </select>
                    <select id="expiryYear" name="expiryYear">
                        <option value="2011">2011</option>
                        <option value="2012">2012</option>
                        <option value="2013">2013</option>
                        <option value="2014">2014</option>
                        <option value="2015">2015</option>
                        <option value="2016">2016</option>
                        <option value="2017">2017</option>
                        <option value="2018">2018</option>
                        <option value="2019">2019</option>
                        <option value="2020">2020</option>
                    </select>
                    <br />
                    <label for="email"  class="paymentLabel">Email:</label>
                    <input type="text" id="email" name="email" class="reqd email" value="" /><span class="error" id="emailError">Please input your contact number correctly.</span>
                    <br />

                    <label for="contact"  class="paymentLabel">Contact number:</label>
                    <input type="text" id="contact" name="contact" class="reqd phoneNum" value="" /><span class="error" id="contactError">Please input your contact number correctly.</span>
                    

            </fieldset>
            <%
                        Member member = (Member) session.getAttribute("member");
                        if (member != null) {
                            String role = member.getRole();
                            if (role.equalsIgnoreCase("Customer")) {
            %>
            <jsp:include page="member_Payment.jsp"/>
            <%} else if (role.equalsIgnoreCase("Officer")) {
            %>
            <jsp:include page="officer_Payment.jsp"/>
            <%                                        }
                        }
            %>

            <div id="button">
                <input type="submit" value="Submit" />
                <input type="reset" value="Reset" />
            </div>
        </form>


                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>

                    <!-- end div#content -->

                    <jsp:include page="/WEB-INF/jsp/_sidebar.jsp"/>

                    <!-- end div#sidebar -->

                    <div style="clear: both; height: 1px"></div>
                </div>
            </div>
            <!-- end div#page -->

        </div>
        <!-- end div#wrapper -->

        <div id="footer-wrapper">
            <div id="footer">
                <p id="legal">Copyright &copy; 2007 CYPP . All Rights Reserved. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
                <p id="links"><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></p>
            </div>
        </div>

        <!-- end div#footer -->

    </body>
</html>
